<template>
  <div>
    <render-table
      ref="table"
      :apiUrl="orderQuotation"
      :tableColumn="orderType === 'other'?tableColumn:projectTableColumn"
      :otherConfig="otherConfig"
      :setupConfig="setupConfig"
      :searchReset="searchReset"
      :expand="true"
      :pagination="false"
    >
      <template v-if="orderType === 'other'" v-slot:expand="{ row }">
        <el-table
          :data="row.storeQuotationLists"
          style="width: 100%; padding-left: 250px"
        >
          <el-table-column prop="produceName" label="产品名称" width="200">
          </el-table-column>
          <el-table-column prop="specification" label="规格" width="200">
          </el-table-column
          ><el-table-column prop="parameter" label="参数" width="200">
          </el-table-column
          ><el-table-column prop="brand" label="品牌" width="200">
          </el-table-column
          ><el-table-column prop="unit" label="单位" width="200">
          </el-table-column>
          <el-table-column prop="number" label="数量" width="200">
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价" width="200">
          </el-table-column>
          <el-table-column prop="lowPrice" label="最低价格" width="200">
          </el-table-column>
          <el-table-column prop="money" label="总价" width="200">
          </el-table-column>
        </el-table>
      </template>
      <template v-else-if="orderType === 'project'" v-slot:expand="{ row }">
        <el-table
          :data="row.orderProjectLists"
          style="width: 100%; padding-left: 50px"
        >
          <el-table-column prop="maintenanceItems" label="产品名称" width="200">
          </el-table-column>
          <el-table-column prop="content" label="规格" width="200">
          </el-table-column>
          ><el-table-column prop="unit" label="单位" width="200">
          </el-table-column>
          <el-table-column prop="number" label="数量" width="200">
          </el-table-column>
          <el-table-column prop="taxPrice" label="含税报价" width="200">
          </el-table-column>
          <el-table-column prop="combinedPrice" label="总价" width="200">
          </el-table-column>
          <el-table-column prop="remakeInfo" label="备注" width="200">
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:setup="{ row }">
        <el-button size="medium" type="text" @click="downloadImg(row)"
          >下载报价文件</el-button
        >
        <el-button size="medium" type="text" @click="downloadXls(row)"
          >下载报价单</el-button
        >
        <el-button size="medium" type="text" @click="handleBid(row)"
          >订购</el-button
        >
      </template>
    </render-table>
  </div>
</template>
      
      <script>
import { orderQuotation, successBid } from "@/api/order/api";

export default {
  props: {
    searchReset: {
      // 搜索条件默认值重置值
      type: Object,
    },
    orderType: {
      type: String,
    },
  },
  name: "material-type",
  data() {
    return {
      orderQuotation,
      setupConfig: {
        width: 300,
      },
      dict: {},
      otherConfig: {
        list: "rows",
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      tableColumn: [
        { prop: "corporateName", label: "公司名称" },
        { prop: "contacts", label: "联系人" },
        { prop: "contactsPhone", label: "联系人电话" },
        { prop: "email", label: "邮箱" },
        { prop: "address", label: "地址" },
        { prop: "dtime", label: "交货时间" },
        { prop: "wtime", label: "保修时间" },
        { prop: "qtime", label: "报价时间" },
        { prop: "remake", label: "备注", showOverflow: true },
        { prop: "countPrice", label: "价格" },
      ],
      projectTableColumn: [
        { prop: "corporateName", label: "公司名称" },
        { prop: "contacts", label: "联系人" },
        { prop: "contactsPhone", label: "联系人电话" },
        { prop: "remake", label: "备注", showOverflow: true },
        { prop: "countPrice", label: "价格" },
      ],
    };
  },
  created() {},
  methods: {
    downloadXls(row) {
      if (this.orderType === "project") {
        this.download(
          `/file/down/purchase/project?orderId=${row.orderId}&supplierId=${row.supplierId}`,
          {},
          `${row.corporateName}的工程报价单.xlsx`
        );
      } else {
        this.download(
          `/file/down/purchase/store?orderId=${row.orderId}&supplierId=${row.supplierId}`,
          {},
          `${row.corporateName}的商品类报价单.xlsx`
        );
      }
    },
    downloadPicture(imgSrc, name) {
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.src = imgSrc;
      image.onload = () => {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.download = name || "photo";
          a.href = url;
          a.click();
          a.remove();
          URL.revokeObjectURL(url);
        });
      };
    },
    downloadImg(row) {
      this.downloadPicture(this.baseUrl + row.quotationCopyPhoto, `${row.corporateName}的报价单`);
    },
    handleBid(row) {
      this.$confirm("是否选择该公司的报价?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = {};
          data.orderId = this.searchReset.orderId;
          data.supplierId = row.supplierId;
          successBid(data).then(() => {
            this.$message({
              type: "success",
              message: "比价完成，通过短信通知该供应商",
            });
            this.$emit("handleClose");
          });
        })
        .catch(() => {});
    },
  },
};
</script>
      